<template>
  <div class="mainTitle">
    <base-echarts :option="option" chart-height="160px" chart-width="1000px"></base-echarts>
  </div>
</template>

<script setup lang="ts">
import baseEcharts from "./Base-echarts-webGL.vue"
import type { EChartsOption } from "echarts"
import { computed } from "vue"

interface IProps {
  text?: string
}
const props = withDefaults(defineProps<IProps>(), {
  text: "基于AR的珍稀动物保护平台"
})

const option = computed<EChartsOption>(() => {
  return {
    graphic: {
      elements: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: props.text,
            fontSize: 80,
            fontWeight: "lighter",
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: "transparent",
            stroke: "#FFF",
            lineWidth: 1
          },
          keyframeAnimation: {
            duration: 5000,
            // 取消循环动画
            // loop: true,
            // 动画的关键帧。数组中每一项为一个关键帧
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: "transparent",
                  lineDashOffset: 200,
                  lineDash: [200, 0]
                }
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: "transparent"
                }
              },
              {
                percent: 1,
                style: {
                  fill: "#fff"
                }
              }
            ]
          }
        }
      ]
    }
  }
})
</script>

<style scoped></style>
